<template>
  <div class="pk-goods">
    <div class="pk-goods-headphoto" :style="{background:'url('+userData.avatar+') center center no-repeat'}">
      <el-avatar :size="60" :src="userData.avatar" v-if="userData.avatar"/>
      <div class="pk-goods-avataredit">
        <el-upload
          ref="uploadRef"
          class="upload-demo"
          action="https://api.bytesbay.cn/bolePin/user/uploadPicture"
          :auto-upload="true"
          :show-file-list="false"
          name="filename"
          :headers="updataParam"
          :on-success="onSuccess"
        >
        <template #trigger>
          <el-icon :size="20" color="#999">
            <Edit />
          </el-icon>
        </template> 
      </el-upload>
      </div>
    </div>
    <div class="pk-goods-title mt-12 clamp1">
      <el-input v-model="userData.fullname" style="width: 240px" placeholder="Please input" />
    </div>
    <div class="pk-goods-desc mt-12 gray-color6 clamp2">
        <el-input
          v-model="userData.title"
          :rows="3"
          type="textarea"
          style="width: 240px"
          placeholder="请输入"
        />
    </div>
    <div class="pk-goods-telbox mt-24">
      <el-button type="primary" style="width:100%" size="large" @click="saveBtn">保存</el-button>
    </div>
  </div>
</template>

<script setup>
  import { Edit } from '@element-plus/icons-vue'
  import { ref, onMounted, defineProps, reactive, defineEmits } from 'vue'
  import { agentUpdate } from '@/api/api'
  import { ElMessage } from 'element-plus'
  import { getToken, setKeyItem} from '@/utils/auth'
  const emits = defineEmits(['onComfirm'])
  const updataParam = reactive({
    Token: ""
  })
  const props = defineProps({
    data:{
      type:Object,
      default: () => {}
    }
  })

  const userData = ref(props.data)

  const onSuccess = (e) => {
    userData.value.avatar = e.data 
  }

  const saveBtn = () => {
    agentUpdate({
      agent_id: userData.value.agent_id,
      avatar:userData.value.avatar,
      fullname: userData.value.fullname,
      title: userData.value.title
    }).then(res => {
      if (res.code === 1000) {
        emits('onComfirm', userData.value)
        ElMessage('保存成功')
      }
    })
  }

  onMounted(() => {
    updataParam.Token = getToken()
  })

</script>

<style lang="scss" scoped>
.pk-goods{
  display: flex;
  flex-direction: column;
  align-items:center;
  cursor: pointer;
  &-headphoto{
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background: url("@/assets/usericon.png") center center no-repeat;
    background-size: 60px auto!important; 
    border:#ddd 1px solid;
    position: relative;
  }
  &-title{
    font-size: 16px;
    font-weight: bold;
    color: #000;
  }
  &-desc{
    height: 80px;
  }
  &-telbox{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative;
    color: #737a87;
    height: 80px;
    width: 100%
  }
  &-telicon{
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background: url("@/assets/CallWrapper.svg") center center no-repeat;
    background-size: 60px auto; 
  }
  &-phoneicon{
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background: url("@/assets/Phone.svg") center center no-repeat;
    background-size: 30px auto; 
  }
  &-avataredit{
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: pointer;
  }
}
</style>